<template>
  <div class="d_main">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getAllMaterils">
    </na-table>
    <el-dialog
      :title="'发货信息 - ' + deliverName"
      :visible.sync="isShowDeliverForm"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="bodyNoPadDialog bigDialog"
      height="16vh"
      width="75%"
    >
      <div class="dialogDody">
        <div class="flex" style="height: 100%">
          <div class="left_tag">
            <p
              class="nav1"
              :class="tabIndex == index ? 'active' : ''"
              v-for="(item, index) in tagList"
              :key="index"
              @click="handleTagClick(item, index)"
            >
              {{ item.title }}
            </p>
          </div>
          <div class="content_info" @scroll="scrollEvent">
            <el-form
              ref="formModel"
              :model="formModel"
              :rules="rules"
              :disabled="deliverState == 'see'"
              label-width="80px"
            >
              <div class="items" id="1">
                <div class="title pl0">
                  <h3>基本信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货单号:">
                      <el-input
                        v-model="formModel.deliveryBillNo"
                        placeholder="保存后系统自动生成"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建日期:">
                      <el-input
                        :value="
                          deliverState == 'add'
                            ? getDate()
                            : formModel.createTime
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建人员:">
                      <el-input
                        :value="
                          deliverState == 'add' ? name : formModel.createByName
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货类型:">
                      <el-select
                        filterable
                        v-model="formModel.deliveryType"
                        style="width: 100%"
                        size="small"
                        disabled
                        placeholder="请选择"
                      >
                        <el-option label="成品发货" :value="1"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="订单单号:">
                      <el-input
                        v-model="rowData.saleOrderGroupNumber"
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="客户名称:">
                      <el-input
                        v-model="rowData.customerName"
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="2">
                <div class="title pl0">
                  <h3>寄方信息</h3>
                  <el-button
                    type="text"
                    v-if="deliverState != 'see'"
                  ><i
                    class="el-icon-refresh-right"
                    style="font-size: 16px"
                  ></i
                  >更新地址</el-button
                  >
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="公司名称:">
                      <el-select
                        filterable
                        v-model="formModel.companyName"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择"
                        value-key="companyName"
                      >
                        <el-option
                          :label="item.companyName"
                          :value="item"
                          v-for="(item, index) in companyList"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="姓名:">
                      <el-input
                        v-model="formModel.senderName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话:">
                      <el-input
                        v-model="formModel.senderTelephone"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="地区:">
                      <el-cascader
                        v-model="formModel.addressArr"
                        style="width: 100%"
                        size="small"
                        :options="address"
                        :props="{ label: 'areaName', value: 'areaCode' }"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="详细地址:">
                      <el-input
                        v-model="formModel.address"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="3">
                <div class="title pl0">
                  <h3>收方信息</h3>
                  <div class="more" v-if="deliverState != 'see'">
                    <el-button type="text"
                    ><i class="el-icon-collection" style="font-size: 16px"></i
                    >使用地址簿</el-button
                    >
                    <div class="line"></div>
                    <el-button type="text"
                    ><i class="el-icon-folder-add" style="font-size: 16px"></i
                    >保存新地址</el-button
                    >
                  </div>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="姓名:">
                      <el-input
                        v-model="formModel.receiverName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话:">
                      <el-input
                        v-model="formModel.receiveTelephone"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="地区:">
                      <el-cascader
                        v-model="formModel.receiveAddressArr"
                        style="width: 100%"
                        size="small"
                        :options="address"
                        :props="{ label: 'areaName', value: 'areaCode' }"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="详细地址:">
                      <el-input
                        v-model="formModel.receiveAddress"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="公司名称:">
                      <el-input
                        v-model="formModel.receiveCompanyName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="4">
                <div class="title pl0">
                  <h3>其他信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="收货方式:">
                      <el-select
                        filterable
                        v-model="formModel.receivingWay"
                        placeholder="收货方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in receivingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递方式:">
                      <el-select
                        filterable
                        v-model="formModel.expressWay"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in sendingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递单号:">
                      <el-input
                        v-model="formModel.expressBillNo"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="送货时间:">
                      <el-date-picker
                        v-model="formModel.expressTime"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        style="width: 100%"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递费用:">
                      <el-input
                        v-model="formModel.expressCost"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="付费方式:">
                      <el-select
                        filterable
                        v-model="formModel.paymentWay"
                        placeholder="请选择付费方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in logisticsPaidList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="费用部门:">
                      <el-select
                        filterable
                        v-model="formModel.costAssumeDepartment"
                        placeholder="请选择费用部门"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in departmentList"
                          :key="item.departmentCode"
                          :label="item.departmentName"
                          :value="item.departmentCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="公斤数:">
                      <el-input
                        v-model="formModel.expressGoodsWeight"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="件数:">
                      <el-input
                        v-model="formModel.expressGoodsCount"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="5">
                <div class="title pl0">
                  <h3>明细</h3>
                  <el-button
                    type="text"
                    v-if="deliverState != 'see'"
                  ><i
                    class="el-icon-refresh-right"
                    style="font-size: 16px"
                  ></i
                  >更新明细</el-button
                  >
                </div>
                <el-table :data="formModel.fhMxList">
                  <el-table-column
                    width="190"
                    property="productName"
                    label="产品名称"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    width="100"
                    property="productLayout"
                    label="版面"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productVersion"
                    label="版本"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productSpecificationName"
                    label="型号名称"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productStockQuantity"
                    label="库存数量"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="waitDeliveryQuantity"
                    label="订单待发货"
                  >
                  </el-table-column>
                  <el-table-column
                    width="150"
                    property="deliveryQuantity"
                    label="发货数量"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryQuantity"
                        placeholder="请输入内容"
                        size="small"
                        type="number"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="stockBoxCount"
                    label="库存箱数"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="kilogramQuantity"
                    label="公斤数"
                  >
                  </el-table-column>
                  <el-table-column
                    width="150"
                    property="produceDate"
                    label="生产日期"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productUnit"
                    label="单位"
                  >
                  </el-table-column>
                  <el-table-column property="deliveryMxRemark" label="备注">
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryMxRemark"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="80"
                    label="操作"
                    fixed="right"
                    v-if="deliverState != 'see'"
                  >
                    <template #default="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="handleDeleteDetailRow(scope.row, scope.$index)"
                        v-if="formModel.fhMxList.length > 1"
                      >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowDeliverForm = false"
        >取 消</el-button
        >
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {
  arraySort
} from "@/utils";
import naTable from "@/components/naTable";
import perRedioDialog from "@/components/perDialogRedio";
import selectProductOrder from "@/components/selectProductOrder";
import SelectLLorder from "@/components/selectLLorder";
import Pagination from "@/components/Pagination";
import {
  formatbytes,
  parseTime
} from "@/utils";
import screec from "@/components/screen";
import {
  mapGetters
} from "vuex";

export default {
  name: "Materiel",
  components: {
    naTable,
    perRedioDialog,
    selectProductOrder,
    SelectLLorder,
    screec,
    Pagination
  },
  data() {
    return {
      ops: "add", // 操作、新建，修改，查看
      opsid: 1, // 3 确定 1 新建， 4 修改， 2 查看
      searchLoading: false, // 搜索加载效果
      expends: [],
      cusLoading: false,
      radioCusSelect: null,
      currentCuslistRow: null,
      cusSearch: {
        likeWords: "",
        settlementWay: 0,
        belongToSalesman: "",
        pageIndex: 1,
        pageSize: 10,
      },

      tagList: [
        {
          title: "基本信息",
        },
        {
          title: "寄方信息",
        },
        {
          title: "收方信息",
        },
        {
          title: "其他信息",
        },
        {
          title: "明细",
        },
      ],
      tabIndex: 0,
      deliverState: "",
      rowData:'',
      formModel: {
        deliveryType: 1,
        customerCode: "",
        receiveAddressCode: "",
        receivingWay: "",
        expressWay: "",
        expressBillNo: "",
        expressTime: "",
        expressCost: 0,
        addressArr: [],
        receiveAddressArr: [],
        paymentWay: "",
        costAssumeDepartment: "",
        expressGoodsWeight: 0,
        expressGoodsCount: 0,
        deliveryRemark: "",
        saleOrderGroupCode: "",
        companyName: "",
        senderName: "",
        senderTelephone: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        address: "",
        receiveCompanyName: "",
        receiverName: "",
        receiveTelephone: "",
        receiveProvinceCode: "",
        receiveCityCode: "",
        receiveAreaCode: "",
        receiveAddress: "",
        fhMxList: [
          {
            deliveryMxID: 0, //发货单明细主键ID
            deliveryBillNo: "", //	发货单号
            associationOrderNo: "", //关联业务订单号
            productNo: "", //成品代码（可关联得到：成品类型、产品名称、产品单位、库存总箱数、库存总数量、产品版本和印刷版面等）
            productStockNo: "", //成品规格库存代码
            deliveryBoxCount: 0, //发货箱数
            deliveryQuantity: 0, //发货数量
            deliveryMxRemark: "", //发货明细备注
          },
        ],
      },
      formModelCopy: {},
      detail: [], //发货明细
      isShowDeliverForm:false,
      saleOrderDeliveryList: [], //发货列表
      receivingTypeList: [], // 收货方式列表
      logisticsPaidList: [], // 付费方式
      sendingTypeList: [], // 快递方式
      departmentList: [], // 费用部门
      companyList: [], //寄方公司
      receiveCompanyList: [], //收方公司
      shippingAddress: [],
      address: [],
      isShowAddress: false,
      option: {
        disabledDate: (time) => {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
      },
      // 搜索条件
      search: {
        QueryDataBaseFiled: '',
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        customerCode: "", //客户代码，空值查询全部
        deliveryBillState: -5, //发货单状态：0待确认；1已确认；-1已作废，0查询全部
        outStockState: -1, //出库状态：0待出库；1已出库；-1查询全部
        receivingWay: "", //收货方式，空值查询全部
        expressWay: "", //送货方式，空值查询全部
        paymentWay: "", //付款方式，空值查询全部
        costAssumeDepartment: "", //费用承担部门，空值查询全部
      },
      total: 0, // 总条数
      tableHead: [], // 表格表头
      radioContractSelect: null, // 客户合同单选值
      addProductLoading: false,
      rules: {
        backMaterialPersonName: [{
          required: true,
          message: "请选择人员",
          trigger: "change"
        }, ],
      },

      tableData: {
        headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: 'deliveryID', //表格列表key,也就是一条数据的唯一标识
        senior: false, //高级搜索是否显示
        disableWord: '', //是否禁用显示的字段
        addTitle:'',
        disableStatus: '', //判断未禁用的状态值
        addPermission: 'MenuCode1-3-1-1', //新建按钮权限
        voidWord: '', //需要查询作废的字段
        //表格按钮
        operationBtn: [{
          title: '查看', //按钮名称
          methodsName: 'handleClick', //按钮绑定方法的字段
        },
        {
          title: '编辑', //按钮名称
          methodsName: 'handleEditDeliver', //按钮绑定方法的字段
        },
        {
          title: '确认', //按钮名称
          methodsName: 'handleClick', //按钮绑定方法的字段
        },
        {
          title: '完成', //按钮名称
          methodsName: 'handleClick', //按钮绑定方法的字段
        },
        {
          title: '作废', //按钮名称
          methodsName: 'handleClick', //按钮绑定方法的字段
        },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      }
    };
  },
  computed: {
    ...mapGetters(["name", "userInfo"]),
    deliverName() {
      if (this.deliverState == "add") {
        return "新建";
      } else if (this.deliverState == "edit") {
        return "修改";
      } else if (this.deliverState == "see") {
        return "查看";
      }
    },
  },
  created() {
    //  所有列表数据
    this.getAllMaterils();
    // 表格得表头
    this.getTableHead();
    //获取地区
    this.getArea();
    //收货方式
    this.getReceivingList();
    //付费方式
    this.getPayTypeList();
    //费用部门
    this.getDepartmentList();
    //快递方式
    this.getSendList();
  },
  mounted() {

  },
  methods: {
    handleClick(row) {
      this.opsid = 2;
      this.rowData = row
      this.getDetail(row);
    },
    getDetail(row) {
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        this.formModel = res;
        this.$set(this.formModel, "fhMxList", this.formModel.detailList);
        this.formModel.addressArr = this.formModel.areaCode;
        this.formModel.receiveAddressArr = this.formModel.receiveAreaCode;
        this.deliverState = "see";
        this.isShowDeliverForm = true;
      });
    },

    // 获取表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.saleOrderDeliverylist,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableData.thead = res;
      });
    },
    // 所有列表数据
    getAllMaterils() {
      const parmas = this.search;
      this.searchLoading = true;
      this.$api.business
        .GetMatchPageProduceLogisticss(parmas)
        .then((res) => {
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
        });
    },

    // 获取送货方式数据列表 receivingTypeList
    getSendList() {
      const params = {
        DictionaryCode: "SendingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.sendingTypeList = res;
      });
    },

    getDate() {
      return this.dayjs().format("YYYY-MM-DD");
    },

    //编辑发货单
    handleEditDeliver(row) {
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        this.formModel = res;
        this.$set(this.formModel, "fhMxList", this.formModel.detailList);
        // this.formModel.fhMxList = this.formModel.detailList;
        this.formModel.addressArr = this.formModel.areaCode;
        this.formModel.receiveAddressArr = this.formModel.receiveAreaCode;
        this.deliverState = "edit";
        this.isShowDeliverForm = true;
      });
    },

    // 获取收货方式数据列表
    getReceivingList() {
      const params = {
        DictionaryCode: "ReceivingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.receivingTypeList = res;
      });
    },

    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then((res) => {
        this.address = res;
      });
    },
    // 获取付费方式数据列表
    getPayTypeList() {
      const params = {
        DictionaryCode: "LogisticsPaidType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.logisticsPaidList = res;
      });
    },
    // 获取费用部门数据列表
    getDepartmentList() {
      this.$api.warehouse.GetDepartmentTreeData({}).then((res) => {
        this.departmentList = res;
      });
    },

    //详情滑动事件
    scrollEvent(e) {
      let scrollItems = document.querySelectorAll(".items");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.tabIndex = i;
          break;
        }
      }
      // 滚动条触底了
      if (
        e.srcElement.scrollTop + e.srcElement.offsetHeight ===
        e.srcElement.scrollHeight
      ) {
        // this.tabIndex = this.tagList.length
      }
    },

    //左侧tab栏点击事件
    handleTagClick(item, index) {
      this.tabIndex = index;
      let jump = document.querySelectorAll(".items");
      jump[index].scrollIntoView({ block: "start", behavior: "smooth" });
    },
  },
};

</script>
<style lang="scss" scoped>
.container {
  height: 100%;
}

.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  height: 100%;

  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
}

.addWuliaoBox {

  // padding: 0px 16px 0 16px;
  .boxleft {
    padding: 5px 5px;
  }

  .boxright {
    height: 100%;
    padding: 5px 5px;
    border-left: 1px solid #eeeeee;
  }

  .tableBox {
    margin-top: 16px;
    border: 1px solid #e6e6e6;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;

    .tt {
      height: 38px;
      line-height: 38px;
      padding-left: 16px;
      background: #f7f8fa;
      border-radius: 8px 8px 0 0;
    }
  }
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}

.dialogExpandTable {
  border-left: 1px solid #e6e6e6;
  border-right: 1px solid #e6e6e6;
  margin: 0 10px;
}

.left_tag {
  width: 120px;
  height: 100%;
  border-right: 1px solid rgb(238, 238, 238);
  background-color: #fff;
  p {
    padding: 11px 0;
    position: relative;
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
  }
}

.active {
  color: #3f61f1;
  &::after {
    content: "";
    width: 3px;
    height: 16px;
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    background: #3f61f1;
  }
}
.table_head_address {
  margin-bottom: 8px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  font-weight: 700;
  div {
    padding: 8px 16px;
    width: 100px;
  }
  > div:first-child {
    flex: 1;
  }
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.content_info {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  padding-right: 16px;
  padding-bottom: 16px;
}

</style>
